<template>
    <!-- 导航栏 -->
    <van-nav-bar
      title="编辑收货地址"
      left-text="返回"
      left-arrow
      @click-left="back"
    />

    <!-- 新增表单 -->
    <van-address-edit
      :area-list="areaList"
      show-set-default
      show-delete
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      :address-info="AddressInfo"
      @save="save"
      @delete="del"

    />
</template>


<script>
  // 引入地区初始化数据
  import { areaList } from '@vant/area-data';
  export default {
    name:'AddressEdit',
    // 生命周期
    created(){
      // 接受参数
      this.addrid=this.$route.query ? this.$route.query.addrid :0

      // 立刻调用查询地址的方法
      this.info()
    },
    data()
    {
      return {
        addrid:0,
        AddressInfo:{},
        areaList,
        LoginUser: this.$cookies.get('LoginUser'),
      }
    },
  
    methods:{
      back()
      {
        this.$router.go(-1)
      },

      // 请求当前编辑的收货地址
      async info(){
        // 组装数据
        var data={
          userid:this.LoginUser.id,
          addrid:this.addrid
        }
        // console.log(data);

        // 调用接口
        var result=await this.$api.AddressInfo(data)
        // console.log(result);

        if(result.code==0){
          this.$notify({
            type:"danger",
            message:result.msg,
            duration:1000,
            onClose:()=>{
              this.$router.go(-1)
            }
          })
          return false
        }
        var data=result.data
        
        var address={
          name:data.consignee,
          tel:data.mobile,
          addressDetail:data.address,
          isDefault:data.status==1? true:false
        }

        if(data.province){
          address.province=data.provinces.name
          address.areaCode=data.province
        }
        if(data.city){
          address.city=data.citys.name
          address.areaCode=data.city
        }
        if(data.district){
          address.district=data.districts.name
          address.areaCode=data.district
        }

        // 将最终整理好的数据结构覆盖
        this.AddressInfo=address
      },
      //保存地址
      async save(content)
      {
        
        // return false;
        //组装数据
        var data = {
          addrid:this.addrid,
          consignee: content.name,
          mobile: content.tel,
          code: content.areaCode,
          address: content.addressDetail,
          status: content.isDefault ? 1 : 0,
          userid: this.LoginUser.id
        }

        console.log(data);
        //调用接口
        var result = await this.$api.AddressEdit(data)
        console.log(result);
        if(result.code == 1)
        {
          //成功
          this.$notify({
            type:'success',
            message:result.msg,
            duration:1000,
            onClose: () => {
              this.$router.go(-1)
            }
          })
        }else
        {
          //失败
          this.$notify({
            type:'danger',
            message:result.msg,
            duration:1000,
          })
        }
      },
      // 删除地址
      async del(content){
        // 确认对话框
        this.$dialog.confirm({
          title:"标题",
          message:'是否确认删除收货地址'
        }).then(async()=>{
          // 组装数据
          var data ={
            userid:this.LoginUser.id,
            addrid:this.addrid
          }

          var result = await this.$api.AddressDel(data)

          if(result.code==1){
            // 删除成功
            this.$notify({
              type: "success",
              message: result.msg,
              duration:1000,
              onClose: () => {
                this.$router.go(-1);
              }
            })
          }else{
            // 失败
            this.$notify({
              message: result.msg,
              duration:1000,
            })
            return
          }
        }).catch(() => {})
      }
    }
  }
</script>